<template>
	<view class="index-page">
		<view class="header" >

			<!--    <view class="logo">
        <image
          style="width: 60rpx; height: 60rpx"
          src="/static/images/logo.jpg"
          mode="scaleToFill"
        />
      </view> -->
<!-- 			<view class="prompt" v-if="promptIs">
				<image style="width: 100%; height: 80rpx"
					:src="'http://lm.benweimei.cn/prod-api/profile/upload/2025/07/17/prompt_20250717094711A001.png'"
					mode="scaleToFill" class="prompt-img" />

				<image :src="'http://lm.benweimei.cn/prod-api/profile/upload/2025/07/17/prompt1_20250717094726A002.png'"
					mode="scaleToFill" @click="clickPrompt" class="prompt-img1" />
			</view> -->
			<!--     <view class="search">
      <image
          style="
            width: 60rpx;
            height: 60rpx;
            margin-right: 20rpx;
            border-radius: 50%;
          "
          src="/static/images/logo.jpg"
          mode="scaleToFill"
        />
        <u-search
          height="60rpx"
          searchIconColor="#4b3138"
          :showAction="false"
          placeholder="请输入搜索关键词"
          shape="square"
          v-model="keyword"
          disabled
          @click="searchFocus"
        ></u-search>
      </view> -->
		</view>

		<scroll-view class="scroll" scroll-y @scroll="pageScroll">

			<!-- <view v-for="(itemImgs,index) in swiperList" :key="index" class="items img1">
				qqqqq -->
				<u-swiper v-for="(itemImgs,index) in swiperList" :list="itemImgs"  keyName="img" height="100%" radius="0" indicator indicatorMode="dot" circular
					@click="swiperSkip($event, itemImgs)"></u-swiper>
			<!-- </view> -->


			<!-- 		<view>
				<view class="img1">
					<image style="width: 100%" v-for="(item, index) in profileList" :key="index" mode="widthFix"
						:src="item.img" @click="swiperSkip(index, 2)"></image>
				</view>
			</view> -->

			<!-- <image
        v-for="(item, index) in referralsList"
        :key="index"
        class="img"
        :src="item.goodImg"
        mode=""
      ></image> -->
		</scroll-view>


		<view class="navigation">
			<u-transition :show="transitionShow" :mode="transitionMode">
				<view class="icon-list">

					<view style="width: 80rpx; min-height: 180rpx; overflow: hidden">
						<u-transition :show="iconShow" :mode="iconMode">
							<view class="icon-bg" v-for="(item, index) in iconList" :key="index"
								@click="clickNavigation(item)">
								<image class="icon" :src="item.src" mode=""></image>
								<text style="font-size: 12rpx; color: #eccb13">{{
                  item.text
                }}</text>
							</view>
						</u-transition>
					</view>
					<view class="icon-bg">
						<image class="icon" :src="
                iconShow
                  ? '../static/images/home/guanbi.png'
                  : '../static/images/home/jiahao.png'
              " mode="" @click="switchIcon"></image>
					</view>
				</view>
			</u-transition>
		</view>
	</view>
</template>

<script>
	import api from "@/api/homePage";
	import loginApi from "@/api/login";
	import {
		getToken
	} from "@/utils/auth";
	import {
		getQueryString
	} from "@/utils/index";

	export default {
		name: "Index",
		components: {},
		data() {
			return {
				codeUserId: null, // 上级id
				heightConfig: {},
				keyword: "",
				swiperList: [], // 轮播
				profileList: [], // 简介
				referralsList: [],
				promptIs: false,
				iconList: [{
						id: 1,
						src: "../static/images/home/zengsong.png",
						text: "专属福利",
					},
					{
						id: 2,
						src: "../static/images/home/kefu.png",
						text: "客服",
					},
					// {
					//   id: 3,
					//   src: "../static/images/home/gouwuche.png",
					//   text: "购物车",
					// },
					{
						id: 4,
						src: "../static/images/home/dingyue.png",
						text: "活动订阅",
					},
				],
				transitionShow: true,
				transitionMode: "slide-right",
				iconShow: true,
				iconMode: "slide-up",
			};
		},
		onLoad(query) {
			// this.promptIs = true
			this.mainHeight = this.$store.getters.heightData.noTabMainHeight;
			this.heightConfig = this.$store.getters.heightData;
			this.getBannerList();
			// this.getReferralsList();

			const q = decodeURIComponent(query.q);
			let userId = getQueryString(q, "userId");
			this.codeUserId = userId || null;
			uni.setStorageSync("codeUserId", this.codeUserId);

			if (this.codeUserId) {
				let userInfo = uni.getStorageSync("userInfo");
				console.log(userInfo, "userInfo");
				let obj = {
					promotionId: this.codeUserId,
					userId: userInfo.userId,
				};
				console.log(obj, "obj");
				loginApi.binding(obj).then((res) => {
					if (res.code == 200) {} else {}
				});
			}
		},
		onShow() {
			let launchOptions = uni.getLaunchOptionsSync();
			// 获取场景值 1011 - 扫描二维码进入
			if (launchOptions.scene == 1011) {
				let userInfo = uni.getStorageSync("userInfo");
				const token = getToken();
				if (userInfo.flag) {
					uni.showToast({
						title: `您的上级是${userInfo.parentNickName}`,
						icon: "none",
					});
				}
				if (!token) {
					uni.navigateTo({
						url: `/pages/login?codeUserId=${this.codeUserId}`,
					});
				}
			}
		},

		onReady() {},
		methods: {
			clickPrompt() {
				this.promptIs = false
			},
			// banner
			getBannerList() {
				const ts = this
				api.getBannerList().then((res) => {
					if (res.code == 200) {
						
						ts.swiperList = res.data.map(element => {
							const imgs = element.img.split(",");
							const ids = element.urls.split(",");

							return imgs.map((img, index) => ({
								img: img.trim(), // 去除可能的空格
								goodId: ids[index] ? ids[index].trim() : '' // 处理可能的不匹配
							}));
						});
						console.log(ts.swiperList)

						// this.profileList = [];
						// res.data.forEach((element) => {
						//   if (element.type == 1) {
						//     this.swiperList.push(element);
						//   }
						//   if (element.type == 2) {
						//     this.profileList.push(element);
						//   }
						// });
					}
				});
			},
			// 推荐
			getReferralsList() {
				api.getReferralsList().then((res) => {
					if (res.code == 200) {
						this.referralsList = res.data;
					}
				});
			},
			// swiperSkip(index, type) {
			// 	if (type == 1) {
			// 		// 轮播图跳转
			// 		if (this.swiperList[index].goodId) {
			// 			uni.navigateTo({
			// 				url: `/subPages/details/goodDetail?id=${this.swiperList[index].goodId}`,
			// 			});
			// 		}
			// 	} else if (type == 2) {
			// 		// 主页大图跳转
			// 		if (this.profileList[index].urls) {
			// 			uni.navigateTo({
			// 				url: `/subPages/details/goodDetail?id=${this.profileList[index].urls}`,
			// 			});
			// 		}
			// 	}
			// },
			swiperSkip(index, item) {
				if (item[index].goodId) {
					uni.navigateTo({
						url: `/subPages/details/goodDetail?id=${item[index].goodId}`,
					});
				}
			},
			searchFocus() {
				uni.navigateTo({
					url: "/subPages/details/searchPage",
				});
			},
			switchIcon() {
				this.iconShow = !this.iconShow;
			},
			pageScroll() {
				let transitionShow = this.transitionShow;
				if (transitionShow) this.transitionShow = false;
				clearTimeout(this.timer);
				this.timer = setTimeout(() => {
					this.transitionShow = true;
					clearTimeout(this.timer);
				}, 1000);
			},
			clickNavigation(item) {
				const token = getToken();
				if (!token) {
					uni.navigateTo({
						url: "/pages/login",
					});
				} else {
					if (item.id == 1) {
						// 专属福利
					} else if (item.id == 2) {
						// 客服
					} else if (item.id == 3) {
						// 购物车
						uni.switchTab({
							url: "/pages/shopCar",
						});
					} else if (item.id == 4) {
						// 活动订阅
					}
				}
			},
		},
	};
</script>

<style lang="less" scoped>
	.items {
		background-color: #000;
	}

	.index-page {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		flex-direction: column;
		background-color: #fff;

		.header {
			width: 100%;
			padding: 0 20rpx;
			background-color: #fff;

			.logo {
				width: 200rpx;
				height: 60rpx;
				// background-color: #fee7eb;
				border-radius: 20px;
				text-align: center;
				line-height: 60rpx;
				margin: 0 auto;
			}

			.search {
				width: 100%;
				padding: 20rpx 0;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.scroll {
			// margin-top: 100rpx;
			width: 100%;
			min-height: 100vh;
			// overflow-y: auto;

			.img {
				width: 100%;
				margin-top: 12rpx;
			}

			.img1 {
				width: 100%;
				background-size: cover;
			}
		}

		.navigation {
			position: absolute;
			right: 20rpx;
			bottom: 100rpx;

			.icon-list {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;

				.icon-bg {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 10rpx;
					background-color: #fff;
					border-radius: 50%;
				}

				.icon {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	}

	.prompt {
		position: fixed;
		z-index: 999;
		width: 95vw;
		margin-top: 120rpx;

		.prompt-img1 {
			position: absolute;
			top: 15rpx;
			right: 0;
			width: 30rpx;
			height: 30rpx;
		}
	}
</style>